<template>
	<div class="goods-block">
		<!-- 了解更多 -->
		<van-cell title="了解更多" style="font-weight: bold;color: black;"></van-cell>
		<div class="xian"></div>
		<van-row type="flex" justify="center">
			<van-col span="11" class="goods_item" v-for="(item,i) in toReadMore" :key="i">
				<van-image :src="APIDomainName + item.pic"></van-image>
				<div class="van-ellipsis1">{{item.title}}</div>
				<div class="xian1"></div>
				<div class="van-ellipsis2">{{item.details}}</div>
				<div class="van-ellipsis3">{{item.href}}</div>
			</van-col>
		</van-row>
	</div>
</template>
<script>
export default {
		name: 'homeToReadMore',
		props: {
			toReadMore:Array,
		},
		methods: {
		
		}
	}
</script>
<style lang="less" scoped>
	.goods-block {
		background-color: #ffffff;

		.van-cell {
			font-size: 20px;
			background-color: #ffffff;
			color: #686868;
			text-align: center;
		}

		.goods_item {
			display: flex;
			flex-direction: column;
			margin: 8px;
			padding: 5px;
			background-color: white;
			border-radius: 10px;
			font-size: 14px;
			border: 1px solid #d6d6d6;
			
			.van-ellipsis1{
				margin-top: 0.5rem;
				font-weight: bold;
				font-size: 1.1rem;
			}
			.van-ellipsis2{
				margin-top: 0.5rem;
			}
			.van-ellipsis3{
				margin-top: 0.5rem;
				font-weight: bold;
			}
			.price {
				font-size: 18px;
				color: red;
				font-weight: bold;
				text-align: right;
				padding-right: 10px;
			}

		}

	}
	.xian{
		width: 3.5rem;
		height: 0.3rem;
		margin: 0 auto 0.8rem;
		background-color: #65a15a;
	}
	.xian1{
		width: 3.5rem;
		height: 0.2rem;
		margin-top: 0.3rem;
		background-color: #65a15a;
	}
</style>
